<template>
  <div>
    <el-row class="home" :gutter="20">
      <el-col :span="8">
        <el-card class="box-card" style="height: 290px">
          <div class="user">
            <img :src="userImg" />
            <div class="userinfo">
              <p>Bob</p>
              <p>超级管理员</p>
            </div>
          </div>
          <div class="login">
            <p>上次登录时间 <span>2021-7-10</span></p>
            <p>上次登录地点 <span>广东</span></p>
          </div>
        </el-card>
        <el-card class="box-card" style="height: 510px; margin-top: 20px">
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column
              v-for="(value, key) in tableLabel"
              :prop="key"
              :label="value"
              width="180"
            >
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="16">
        <div class="order">
          <el-card
            class="box-card"
            v-for="item in orderData"
            :body-style="{ padding: '0px' }"
          >
          <div class="orderDesc">
            <i
              class="icon"
              :class="item.icon"
              :style="{ background: item.color }"
            ></i>
            <div class="orderinfo">
              <p class="num">￥ {{ item.num }}</p>
              <p class="txt">{{ item.txt }}</p>
            </div>
            
            </div>
            
          </el-card>
        </div>
        <div class="graph">
          <el-card class="box-card">
            <Echart
              class="text item"
              style="height: 260px"
              :charData="echartData.order"
            ></Echart>
          </el-card>
        </div>
        <div class="chart">
          <el-card class="box-card">
            <Echart
              class="text item"
              style="height: 260px"
              :charData="echartData.user"
            >
              echart
            </Echart>
          </el-card>
          <el-card class="box-card">
            <Echart
              class="text item"
              style="height: 260px"
              :charData="echartData.video"
              :isAxisChart="false"
            ></Echart>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Echart from "../../components/EChart";
export default {
  components: {
    Echart,
  },
  data() {
    return {
      userImg: require("../../assets/images/1546053711-wyKASGsfqM.jpg"),
      orderData: [
        {
          icon: "el-icon-success",
          color: "#2ec7c9",
          num: 1234,
          txt: "今日支付订单",
        },
        {
          icon: "el-icon-star-on",
          color: "#ffb980",
          num: 210,
          txt: "今日收藏订单",
        },
        {
          icon: "el-icon-s-goods",
          color: "#5ab1ef",
          num: 1234,
          txt: "今日未支付订单",
        },
        {
          icon: "el-icon-success",
          color: "#2ec7c9",
          num: 1234,
          txt: "今日支付订单",
        },
        {
          icon: "el-icon-star-on",
          color: "#ffb980",
          num: 210,
          txt: "今日收藏订单",
        },
        {
          icon: "el-icon-s-goods",
          color: "#5ab1ef",
          num: 1234,
          txt: "今日未支付订单",
        },
      ],
      echartData: {
        order: {
          xData: [],
          series: [],
        },
        user: {
          xData: [],
          series: [],
        },
        video: {
          series: [],
        },
      },
      tableData: [],
      tableLabel: {
        name: "课程",
        monthBuy: "本月购买",
        todayBuy: "今日购买",
        totalBuy: "总购买",
      },
    };
  },
  created() {
    //在创建是就向mock请求到数据
    this.$http.get("/home/getStatisticalData").then((res) => {
      console.log(res.data.data);

      this.tableData = res.data.data.tableData;
      //分别调用下面的order,user,和video方法，好一个个展现
      this.orderChart(res);
      this.userChart(res);
      this.videoChart(res);
    });
  },
  methods: {
    //订单曲线图
    orderChart(res) {
      //订单折线图  从mockjs里获取数据
      const order = res.data.data.orderData;
      console.log("order", order);
      //将订单数据传给data中的order
      this.echartData.order.xData = order.date;
      //第一步取出order.date中的键名
      let keyArray = Object.keys(order.data[0]);
      console.log(keyArray);
      //对keyArray的key进行循环,根据key，在mock的数据里面找到对应课程的数据
      keyArray.forEach((key) => {
        //将课程的数据放入到series的data里；
        this.echartData.order.series.push({
          name: key === "wechat" ? "小程序" : key,
          data: order.data.map((item) => item[key]),
          type: "line",
        });
      });
    },
    //用户曲线图
    userChart(res) {
      
      const user = res.data.data.userData;

      this.echartData.user.xData = user.map((item) => item.date);

      this.echartData.user.series.push({
        name: "新用户",
        type: "bar",
        data: user.map((item) => item.new),
      });

      this.echartData.user.series.push({
        name: "活跃用户",
        type: "bar",
        data: user.map((item) => item.active),
      });
    },
    videoChart(res) {
      const video = res.data.data.videoData;
      this.echartData.video.series.push({
        data: video,
        type: "pie",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/scss/home.scss";
</style>
